<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <title>A-soul Tools Options</title>
    <link rel="stylesheet" href="../css/options.css">
    <link rel="stylesheet" href="../css/element-plus.css">
    <script src="../js/util/vue.js"></script>
    <script src="../js/util/element-plus.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="header"></div>
      <div class="main">
        <el-scrollbar>
          <el-row justify="center" class="content">
            <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
              <div class="left-panel panel">
                <el-affix :offset="240">
                  <el-menu
                    class="el-menu-vertical-demo"
                    active-text-color="#b8a6d9"
                  >
                    <template v-for="(item, index) in menuOptions" >
                      <el-menu-item :index="index + ''" @click="menuItemClick(item.name)">
                        <span>{{ item.name }}</span>
                      </el-menu-item>
                    </template>
                  </el-menu>
                </el-affix>
              </div>
            </el-col>
            <el-col :xs="10" :sm="8" :md="8" :lg="8" :xl="8">
              <div class="center-panel panel">
                <form>
                  <div class="form-item" v-for="(item, key) in formOptions">
                    <!-- 分隔线 -->
                    <div class="divider" v-if="item.isDivider === true"></div>
                    <!-- title -->
                    <div class="center-panel-title"
                      :id="item.name"
                      v-if="item.type === 'title'"
                    >
                      {{ item.name }}
                    </div>
                    <!-- 表单 -->
                    <div class="item-content" v-if="item.type !== 'title' && item.type !== 'table'">
                      <div class="form-title" v-if="item.name">
                        <div>{{ item.name }}</div>
                        <el-tooltip
                          v-if="item.tooltip"
                          effect="dark"
                          :content="item.tooltip"
                          placement="top"
                        >
                          <div class="form-title-tooltip"></div>
                        </el-tooltip>
                      </div>
                      <el-button
                        v-if="item.type === 'button'"
                        @click="item.onchange"
                      >
                        {{ item.name }}
                      </el-button>
                      <el-switch
                        v-if="item.type === 'switch'"
                        v-model="dataForm[item.value]"
                        :active-value="true"
                        :inactive-value="false"
                        active-color="#B8A6D9"
                        @change="item.onchange"
                      />
                    </div>
                    <div v-if="item.type === 'table' && dataForm.isListenLiveStatus">
                      <el-table
                        :data="membersInfo"
                        style="width: 100%; margin: 10px 0;"
                        stripe
                        border
                        @selection-change="liverSelectionChange"
                      >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="name" label="已监听up主"></el-table-column>
                        <el-table-column prop="mid" label="UID"></el-table-column>
                        <el-table-column prop="roomId" label="直播间号"></el-table-column>
                      </el-table>
                      <div style="display: flex; align-items: center; justify-content: end;">
                        <el-input
                          v-model="addlistenMid"
                          style="width: 200px"
                          placeholder="请输入想要监听用户的uid"
                        ></el-input>
                        <el-button style="margin-left: 12px;" @click="addListenClick">添加</el-button>
                        <el-button @click="deleteLiver">移除已选</el-button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </el-col>
            <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
              <div class="right-panel panel"></div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
      <div class="footer"></div>
    </div>
  </body>
  <script src="../js/util/util.js"></script>
  <script src="../js/options.js"></script>
</html>